<template>
  <div class="app-container" >
    <div class="" style="display:flex;margin-bottom: 10px;">
    <el-card class="box-card" v-for="(item, index) in list" :key="index" style="margin-right: 20px;flex: 1;">
      <div slot="header" class="clearfix">
        <h4>{{item.type == 1?'小程序':item.type == 2?'管理系统': '--'}}</h4>
      </div>
      <template v-if="item.json">
        <div v-for="(curr,idx) in item.jsonArr" :key="idx" class="text item">
            <template v-if="idx == 'title'">
                <div class="input-box">
                    <h5 for="title">标题</h5>
                    <el-input :value="curr" @input="onInput($event, item, idx)"></el-input>
                </div>
            </template>
            <template v-else-if="idx == 'screenUrl'">
                <div class="input-box">
                    <h5 for="title">大屏地址</h5>
                    <el-input :value="curr" @input="onInput($event, item, idx)"></el-input>
                </div>
            </template>
            <template v-else-if="idx == 'locationCenter'">
                <div class="input-box">
                    <h5 for="title">中心坐标</h5>
                    <el-input :value="curr" @input="onInput($event, item, idx)" placeholder="高德地图坐标"></el-input>
                </div>
            </template>
            <template v-else>
                <h5 style="margin:10px 0">{{idx}}</h5>
                <ImageUpload :value="curr" @input="onInput($event, item, idx)" :limit="idx=='homeBanner'?3:1"></ImageUpload>
            </template>
        </div>
      </template>
    </el-card>
    </div>
    <el-button type="primary" @click="onSubmit">保 存</el-button>
  </div>
</template>
<script>
import { getSystemConfig, updateSystemConfig } from "@/api/sysConfig";
export default {
  data() {
    return {
      list: [
        {type: 1,tenantId: 68, code: 'mini', json: `['22']`, jsonArr: { title: '','homeBanner': '', logo: ''}},
        {type: 2,tenantId: 68, code: 'admin', json: `['22']`, jsonArr: {title: '', logo: '', screenUrl: ''}},
      ],
    };
  },
  computed: {
    memberInfo() {
        return this.$store.state.memberInfo;
    }
  },
  mounted() {
    this.getSystemConfig();
  },
  methods: {
    async getSystemConfig() {
      try {
        const res = await getSystemConfig();
        if(res.data && res.data.length) {
            this.list = res.data.map(item => {
                if(item.json) {
                    console.log()
                    const _json = JSON.parse(item.json);
                    const defaultJson = { title: '',homeBanner: '', logo: '', locationCenter: ''};
                    item.jsonArr = Object.assign({}, defaultJson, _json);
                }else{
                    item.jsonArr = []
                }
                return item;
            });
        }else{
            this.list[0].tenantId = this.memberInfo.tenantId;
        }
      } catch (error) {}
    },
    onInput(e, item, key) {
        if(key == 'locationCenter') {
            if(!e) {
                item.jsonArr[key] = ''
            }else{
                const _location = JSON.parse(e);
                const loca84 = this.GPS.GCJ02toWGS84(..._location);
                item.jsonArr[key] = JSON.stringify(loca84)
            }
        }else{
            item.jsonArr[key] = e;
        }
        // console.log( item)
    },
    onSubmit() {
        const form = [];
        this.list.forEach(item => {
            const obj = {};
            obj.id = item.id;
            obj.tenantId = item.tenantId;
            obj.type = item.type;
            obj.code = item.code;
            obj.json = JSON.stringify(item.jsonArr);
            form.push(obj)
        })


       updateSystemConfig(form).then(res => {
            this.$message.success(res.msg||'保存成功！')
            if(res.code == 1) {
                this.$store.dispatch('getSystemConfig')
            }
       })
    }
  },
};
</script>
<style lang="scss" scoped>
.input-box {
    display: flex;
    align-items: center;
    padding: 10px 0;
    h5 {
        flex-wrap: nowrap;
        word-break: keep-all;
        margin-right: 10px;
        
    }
}
</style>